@extends('admin.base')

@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">

            <div class="layui-form-item">
                <div class="layui-input-inline"  >
                    <button class="layui-btn  caller-fr" id="addmedia">添加设备</button>
                </div>

            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    @can('shebei.device.edit')
                        <a class="layui-btn layui-btn-sm" lay-event="start">启动</a>
                        <!--<a class="layui-btn layui-btn-sm" lay-event="close">关闭</a>-->
                        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-sm" lay-event="xcxcode">小程序码</a>
                    @endcan
                    @can('shebei.device.destroy')
                        <!--<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>-->
                    @endcan
                </div>
            </script>
        </div>
    </div>
@endsection

@section('script')
@can('shebei.device')
<script>
    layui.use(['layer', 'table', 'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var modal;
        //用户表格初始化
        var dataTable = table.render({
            elem: '#dataTable'
            , autoSort: false
            , height: 500
            , url: "{{ route('admin.device.data') }}" //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {checkbox: true, fixed: true}
                , {field: 'id', title: 'ID', sort: true, width: 60}
                , {field: 'device_no', title: '编号'}
                , {field: 'factory_name', title: '机器厂家', templet: function(d){
                    return d.factory.name;
                }}
                , {field: 'device_model', title: '型号'}
                , {field: 'sitename', title: '所属站点', templet: function(d){
                    if (d.site !== null ){
                        return d.site.name;
                    }else{
                        return '';
                    }
                }}
                , {field: 'is_online', title: '设备状态'}
                , {field: 'runcount', title: '启动次数',templet:function (d){
                        var runlog_count = 0;
                        return runlog_count;
                    }}
                , {fixed: 'right', width: 220, align: 'center', toolbar: '#options'}
            ]]
            ,done: function(result, curr, count){
                //获得捷洁所有在线设备，并更新
                /*
                var that=this.elem.next();
                 $.get("/api/device/onlinedevice", function (res) {
                     if (res.code == 0) {
                        $.each(result.data, function (index, obj){
                            $.each(res.data.device_list, function(index, device_no) {
                                if (obj.device_no == device_no){
                                    //console.log(index,device_no);
                                    that.find(".layui-table-box tbody tr[data-index='" + index + "']").find('td[data-field="is_online"] .layui-table-cell').html('在线');
                                }
                            });
                        });
                     } else {
                         layer.msg(res.msg, {icon: 2})
                     }
                 });
                 */
            }
        });
        //监听工具条
        table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                var str = '确认删除吗？';
                layer.confirm(str , function (index) {
                    layer.close(index);
                    var load = layer.load();
                    $.post("{{ route('admin.device.destroy') }}", {
                        _method: 'post',
                        ids: [data.id]
                    }, function (res) {
                        layer.close(load);
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1}, function () {
                                obj.del();
                            })
                        } else {
                            layer.msg(res.msg, {icon: 2})
                        }
                    });
                });
            } else if (layEvent === 'start') {
                var open_sn = data.open_sn;
                layer.confirm('确定要启动机器吗？' , function (index) {
                    var result = StartDevice(open_sn);
                    console.log(result);
                    layer.msg(result.msg,{time:3000, icon:1});
                    window.layui.table.reload("dataTable");
                });
                //top.layui.index.openTabsPage('/admin/media/edit?id=' + data.id +'&estate_id=', '编辑点位');
            }else if (layEvent === 'edit'){
                modal2 = layer.open({
                    type: 2,
                    //title: '编辑设备',
                    area: ['50%', '90%'],
                    content: '/admin/device/edit?id=' + data.id,
                    success: function (res) {
                        //console.log(res);
                        if (res.code == 0){
                            layer.close(modal);
                            // table.reload('dataTable');
                        }
                    }
                });
            }else if (layEvent === 'xcxcode'){
                var open_sn = data.open_sn;
                var loading = layer.load(2, {shade: false, time: 3*1000});
                $.ajax({
                    url: '/admin/device/xcxqrcode',
                    method: 'get',
                    data: {open_sn: open_sn},
                    dataType: 'json',
                    success: function(datae) {
                        layer.close(loading);
                        if (datae.code == 0) {
                            imgurl = datae.data.imgurl;
                            layer.open({
                                title: '小程序码',
                                type: 1,
                                area: ['305px', '345px'],
                                offset: 'auto',
                                skin: 'layui-layer-rim', //加上边框
                                content: '<img src="'+imgurl+'" width="300px">'
                            });
                        }
                    }
                });
            }
        });


        //按钮批量删除
        $("#listDelete").click(function () {
            var ids = [];
            var hasCheck = table.checkStatus('dataTable');
            var hasCheckData = hasCheck.data;
            if (hasCheckData.length > 0) {
                $.each(hasCheckData, function (index, element) {
                    ids.push(element.id)
                })
            }
            if (ids.length > 0) {
                layer.confirm('确认删除吗', function (index) {
                    layer.close(index);
                    var load = layer.load();
                    $.post("{{ route('admin.device.destroy') }}", {
                        _method: 'delete',
                        ids: ids
                    }, function (res) {
                        layer.close(load);
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1}, function () {
                                dataTable.reload({page: {curr: 1}});
                            })
                        } else {
                            layer.msg(res.msg, {icon: 2})
                        }
                    });
                });
            } else {
                layer.msg('请选择删除项', {icon: 2})
            }
        });

        //添加设备铵钮
        $("#addmedia").click(function (){
            modal = layer.open({
                type: 2,
                area: ['40%', '90%'],
                content: '/admin/device/create',
                success: function (res) {
                    console.log(res);
                    if (res.code == 0){
                        layer.close(modal);
                        // table.reload('dataTable');
                    }
                }
            });
        });

        //搜索
        $("#searchBtn").click(function () {
            var name = $("#name").val();
            dataTable.reload({
                where: {name: name},
                page: {curr: 1}
            })
        });

        //启动机器
        function StartDevice(open_sn) {
            var result = [];
            $.ajaxSettings.async = false;
            $.get("/admin/device/start?open_sn="+open_sn, function (res) {
                result = res;
                console.log(result);
            });
            return result;
        }


    })
</script>
@endcan
@endsection
